<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: #bdbdbd;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
      }

      .num {
        width: 45px;
        height: 80px;
        background-size: cover;
      }

      .item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-size: cover;
      }

      .message {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }

      .content {
        border: none;
        box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
        padding: 4px;
        margin: 4px;
      }

      .landmines {
        display: flex;
        justify-content: center;
      }
      .head {
        border: 5px solid #808080;
        border-left-color: #fff;
        border-top-color: #fff;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td,
      th {
        border: 2px solid #808080;
        border-left-color: #fff;
        border-top-color: #fff;
        text-align: left;
        padding: 8px;
        margin: 2px;
      }
      th {
        text-align: center;
      }

      p {
        text-align: center;
        margin-top: 5px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="message content">
        <div class="landmines"></div>

        <div
          class="head"
          style="
            background-size: cover;
            width: 70px;
            height: 70px;
            background-image: url(data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7);
          "
        ></div>

        <div class="head" style="background-size:cover;width:70px;height:70px;background-image:url({{headurl}})"></div>
      </div>
      <div class="box1" style="text-align: center">
        <div class="box content" id="help">
          <table>
            <tbody>
              <tr>
                <th>指令</th>
                <th>说明</th>
                <th>注意</th>
                <th>示例指令</th>
              </tr>
              <tr>
                <td>{{prefix}}扫雷<br /></td>
                <td>开始游戏</td>
                <td></td>
                <td>{{prefix}}扫雷</td>
              </tr>
              <tr>
                <td>{{prefix}}结束扫雷</td>
                <td>结束游戏</td>
                <td></td>
                <td>{{prefix}}结束扫雷</td>
              </tr>
              <tr>
                <td>{{prefix}}扫雷难度</td>
                <td>使用指定难度开始游戏</td>
                <td>数量多的时候字就小</td>
                <td>{{prefix}}扫雷难度(简单|普通|困难)</td>
              </tr>
              <tr>
                <td>{{prefix}}翻开</td>
                <td>翻开指定的位置</td>
                <td>可以一次输入多个坐标，不区分大小写</td>
                <td>{{prefix}}翻开a1a8h0h9</td>
              </tr>
              <tr>
                <td>{{prefix}}标记</td>
                <td>标记指定的位置</td>
                <td>同上</td>
                <td>{{prefix}}标记a1a8h0h9</td>
              </tr>
              <tr>
                <td>{{prefix}}取消标记</td>
                <td>取消标记指定的位置</td>
                <td>同上</td>
                <td>{{prefix}}取消标记a1a8h0h9</td>
              </tr>
              <tr>
                <td>{{prefix}}扫雷设置地雷数量</td>
                <td>设置当前难度的地雷数量</td>
                <td></td>
                <td>{{prefix}}扫雷设置地雷数量50</td>
              </tr>
              <tr>
                <td>{{prefix}}扫雷设置布局</td>
                <td>自定义宽高格子数量和雷数量</td>
                <td>大小不建议超过26，分为三个参数：宽 高 雷；使用空格隔开即可，不设置雷则回到默认值：10</td>
                <td>{{prefix}}扫雷设置布局15 15 20</td>
              </tr>
              <tr>
                <td>{{prefix}}扫雷帮助</td>
                <td>自定义宽高格子数量和雷数量</td>
                <td>大小不建议超过26，分为三个参数：宽 高 雷；使用空格隔开即可，不设置雷则回到默认值：10</td>
                <td>{{prefix}}扫雷扫雷帮助</td>
              </tr>
            </tbody>
            <colgroup>
              <col style="width: 25%" />
              <col style="width: 25%" />
              <col style="width: 25%" />
              <col style="width: 25%" />
            </colgroup>
          </table>

          <div>更新日志</div>
          <table>
            <tbody>
              <tr>
                <td>更新时间：</td>
                <td>4/12 00:00</td>
              </tr>
              <tr>
                <td>修复</td>
                <td>自定义布局后无法开始游戏的bug</td>
              </tr>
              <tr>
                <td>改动</td>
                <td>非游戏发起人或频道主无法主动结束游戏</td>
              </tr>

              <tr>
                <td>改动</td>
                <td>频道内游戏时，显示机器人头像</td>
              </tr>
              <tr>
                <td>新增</td>
                <td>图片底部显示指令内容</td>
              </tr>
              <tr>
                <td>新增</td>
                <td>帮助显示更新内容</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <p>{{command}}</p>
    </div>
  </body>
  <script type="text/javascript">
    /**
     * yep：微笑
     * xx：寄了
     * num：显示的数字
     * landmine：地图样式
     * 0：翻开空
     * 1-8：雷数量
     * 9：雷
     * -：未翻开
     * +：标记
     * x：踩中的雷
     */
    const icon = {
      xx: 'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AMDAwAAAACH5BAAHAP8ALAAAAAAVABUAAAJDlI+py50AoUMwWCsduBy33XXAAm5gYHrPdWLs6p6parShSN36eNg6LbBFKhxejyV6wXwo4PGH+vyMDCKLqhlOttxuAQA7',
      yep: 'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7',
      num: {
        0: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKaQSC60YI/NZPW8dpApZrqvKhfkIPkIi5jFANWUkS5CUKADs=',
        1: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI3lI8psc33mDQAmilAdUnv1mkXeHhWuGGlOCpsxGXIpII0dYbjs358v0PlgDGiDfQKPj6cmkJRAAA7',
        2: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgfFAwta3JBu6i0UHwgp6cztQT/jCSZWTmGN5kn08BADs=',
        3: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgXMGUvJFebnRi6/qpcECU8OB7XYK2CNIm+3wKADs=',
        4: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8psc0HDJsmCmDptdhCXIFIF3rlOYpkyplftXWgJ9cHU8+3skkNu0usNB/PA+gQin4a0YPyMEF/PF4BADs=',
        5: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHNmHR0iwnmKvVOZgiAWr2cU3jBIHKpmc7kKADs=',
        6: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHPRiJE2woFPvxupeEDU0HeM5XQ4B6oWdCEKADs=',
        7: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl963buIUejLziHZnkfOpHl/qtcCoU0dDBpVy8WO0W/EgLADs=',
        8: 'data:img/gif;base64,R0lGODlhDQAXAIAAAP8AAAAAACH5BAQUAP8ALAAAAAANABcAAAI0jI8Jy3wQmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VvbIGJja6pWvbirvPBbJdRawKL3ZaGAgA7',
        9: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI6lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VC0E4HnWDzLqp4b6D9SrecRrjy1XS0mAUWy0kNBQA7'
      },
      landmine: {
        '0': 'data:img/gif;base64,R0lGODlhGQAZAKIAAM7OzsbGxr6+vra2trKysqampoKCggAAACH5BAAHAP8ALAAAAAAZABkAAANHaLrc3mWQSau9xAwQuv9gGBhEIJxoqq4CabLw6sY0Otf0jcP6Lpc+HjD4exFTvWNrqDwlj09iNDj1VXdXXLa2zTGb3VgYlgAAOw==',
        '1': 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAA/wAAACH5BAQUAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuLIRC9lFiSAbZOWqqybZVCcWoC8fpeu5gj/uJfBUWMXebvYpAJdJGoQFsTc8yQh1OpJ3otesEH8XbLzlSAAA7',
        '2': 'data:img/gif;base64,R0lGODlhGQAZALMAAMDAwKu5q6i4qKW3pZy0nJaylpCwkIquioCAgACAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAReEMlJq704X8C7/yAnhSQ5lmh3cknrvi64wvT7zXV9I50N+ipeihXzrFACoEhYMtB2pSSsIGN6CrRBIHQEEGjb0pEmGOJch+Gyl3samW13kB0vztViKx665+r7a4AfEQA7',
        '3': 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiOFIfiZbSmabT16le0EWyRdeg+OZTGzL5JECBsFI86m4AGIfpzEB9RVLPVuWtqFnjVZeJgmdjzbBMRk8KADs=',
        '4': 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAAmQAAgCH5BAAHAP8ALAAAAAAZABkAAAJdjI+py70Ao5wUmorxzTzuOgjAQJLUN5FiaU5oVK7sGVAxxA50Gor47KrBVJLc7hfilY6jnHMp+TynwYjgisXmfB4hx1jtgKPezLjbaULJ6bOlnK684mG6HG5H5ykFADs=',
        '5': 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgIAAAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2oodDKmzx9bybeWgW6L9gDZcjLgz3oo9HhPw6TxPyGRTVxUIs1ohjxL9SsLia3nsO0MKADs=',
        '6': 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgACAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJTjI+py70Ao5wUmorxzTxuKITiKFIfiZbTmaJmEI3dCoPqbNWAjOdxS3r9gDyPjhiUsEKVos/GpDgBS0Hz9twhsdTjNmqUfIU9ja5MQ1c+6nBbUgAAOw==',
        '7': 'data:img/gif;base64,R0lGODlhGQAZAJEAAL6+voKCggAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2rUiHIOz9HElznY771NRcpQfrWI8TpJK2S1DtD2hPWeoRhTGojVgV1P9NsWWMBlSAAA7',
        '8': 'data:img/gif;base64,R0lGODlhGQAZAIAAAMDAwICAgCH5BAQUAP8ALAAAAAAZABkAAAJKjI+py70Ao5wUmorxzTxu63xeMIYi8JnHlK4UwpLgOctjaUuwnqtvb/rxQsJaZXcz/k4tGsqVfPp4OCK1yih2OM7t1avJgWNjTAEAOw==',
        '9': 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///76+voKCggAAACH5BAAHAP8ALAAAAAAZABkAAAJglI+py70Bo5wUmhrHwPFyzVlCCIYeBGqqik5nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OBSQ4yv6/aQAADs=',
        'x': 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///4CAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJgjI+py70Co5wUmhrHwPFyzVlBCIYeBGqqik6nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OCSQ4yv6/aQAADs=',
        '+': 'data:img/gif;base64,R0lGODlhGQAZAKIAAP///8DAwICAgP8AAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAANsCLrcriG8OSO9KwiRo//gt3FQaIJjZw7DmZYh25ovEMtzWH+47G6qno8GhAWEOVTRBur9SMxbUrQ8BQiEpyqE1RpBXSLUGtZVI9i0Wu3ZodfwbMR9ja/bZ6s3qjeTNCOBgoMjc4SHhIaIixsJADs=',
        '-': 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///8DAwICAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJKhI+pFrH/GpwnCFGb3nxfzHQi92XjWYbnmAIrepkvGauzV7s3Deq71vrhekJgrtgIIpVFptD5g+6kN+osZflot9xPsgvufsPkSwEAOw=='
      }
    };

    let help = '{{ishelp}}';
    if (help === 'off') {
      document.getElementById('help').innerHTML = '';

      // 导入地图，遍历地图，输出

      // arr传入示例
      // const arr = '0,"-","+","x",1,2,3,4,5,8,9';
      let arr = '{{map}}';
      let x = '{{x}}';
      let mun = '{{muns}}'; // 显示的数字

      mun = mun.split(',');
      let numbers = arr.split(',');

      // 使用正则表达式匹配 'x' 字符
      var reg = /x/g;

      // 判断数组中是否存在 'x' 字符
      if (reg.test(numbers.toString())) {
        // 如果存在，则修改class为head的元素的背景图片
        var head = document.querySelector('.head');
        head.style.backgroundImage = `url(${icon.xx})`;
      }

      let map = []; // 地图
      let munmap = []; // 显示的数字

      // 遍历numbers，每x个数换一行
      for (var i = 0; i < numbers.length; i += x) {
        map.push(numbers.slice(i, i + x));
        munmap.push(mun.slice(i, i + x));
      }

      let c = '{{c}}';
      let size = +c / map[0].length; // 每一个格子的大小
      let sty = `width:${size}px;height:${size}px;`;

      const l = '{{l}}'; // 雷的数量

      var tb = []; // 格子内容
      var lei = []; // 雷的数量
      const box = document.querySelector('.box');
      const landmines = document.querySelector('.landmines');
      const app = document.getElementById('app');

      const lnum = {
        0: `<div class="num" style="background-image: url(${icon.num['0']})"></div>`,
        1: `<div class="num" style="background-image: url(${icon.num['1']})"></div>`,
        2: `<div class="num" style="background-image: url(${icon.num['2']})"></div>`,
        3: `<div class="num" style="background-image: url(${icon.num['3']})"></div>`,
        4: `<div class="num" style="background-image: url(${icon.num['4']})"></div>`,
        5: `<div class="num" style="background-image: url(${icon.num['5']})"></div>`,
        6: `<div class="num" style="background-image: url(${icon.num['6']})"></div>`,
        7: `<div class="num" style="background-image: url(${icon.num['7']})"></div>`,
        8: `<div class="num" style="background-image: url(${icon.num['8']})"></div>`,
        9: `<div class="num" style="background-image: url(${icon.num['9']})"></div>`
      };

      const cs = {
        '-': `<div class="item" style="${sty}background-image: url(${icon.landmine['-']})">`,
        '+': `<div class="item" style="${sty}background-image: url(${icon.landmine['+']})">`,
        'x': `<div class="item" style="${sty}background-image: url(${icon.landmine['x']})">`,
        '0': `<div class="item" style="${sty}background-image: url(${icon.landmine['0']})">`,
        '1': `<div class="item" style="${sty}background-image: url(${icon.landmine['1']})">`,
        '2': `<div class="item" style="${sty}background-image: url(${icon.landmine['2']})">`,
        '3': `<div class="item" style="${sty}background-image: url(${icon.landmine['3']})">`,
        '4': `<div class="item" style="${sty}background-image: url(${icon.landmine['4']})">`,
        '5': `<div class="item" style="${sty}background-image: url(${icon.landmine['5']})">`,
        '6': `<div class="item" style="${sty}background-image: url(${icon.landmine['6']})">`,
        '7': `<div class="item" style="${sty}background-image: url(${icon.landmine['7']})">`,
        '8': `<div class="item" style="${sty}background-image: url(${icon.landmine['8']})">`,
        '9': `<div class="item" style="${sty}background-image: url(${icon.landmine['9']})">`
      };

      for (let i in l) {
        lei.push(lnum[l[i]]);
      }

      for (let i in map) {
        for (let j in map[i]) {
          if (map[i][j] == '-' || map[i][j] == '+') {
            let p = `<div class="number">${munmap[i][j]}</div>`;
            tb.push(`${cs[map[i][j]]}${p}</div>`);
          } else {
            tb.push(`${cs[map[i][j]]}</div>`);
          }
        }
      }

      landmines.innerHTML = lei.join('');
      box.innerHTML = tb.join('');
    }
  </script>
</html>
